import React, { Component } from 'react'
//引入action
import {
	createIncrementAction,
	createDecrementAction,
	createIncrementAsyncAction
} from '../../redux/actions/count'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import countReducer from "../../redux/reducers/count";

//定义UI组件
class Count extends Component {

	state = {carName:'奔驰c63'}

	//加法
	increment = ()=>{
		const {value} = this.selectNumber
		this.props.jia(value*1)
	}
	//减法
	decrement = ()=>{
		const {value} = this.selectNumber
		this.props.jian(value*1)
	}
	//奇数再加
	incrementIfOdd = ()=>{
		const {value} = this.selectNumber
		if(this.props.count % 2 !== 0){
			this.props.jia(value*1)
		}
	}
	//异步加
	incrementAsync = ()=>{
		const {value} = this.selectNumber
        //异步加有两个参数
		this.props.jiaAsync(value*1,500)
	}

	render() {
		//console.log('UI组件接收到的props是',this.props);
		return (
			<div>
				<h2>我是Count组件,下方组件总人数为:{this.props.renshu}</h2>
				<h4>当前求和为：{this.props.count}</h4>
				<select ref={c => this.selectNumber = c}>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>&nbsp;
				<button onClick={this.increment}>+</button>&nbsp;
				<button onClick={this.decrement}>-</button>&nbsp;
				<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
				<button onClick={this.incrementAsync}>异步加</button>&nbsp;
			</div>
		)
	}
}

//使用connect()()创建并暴露一个Count的容器组件
export default connect(  //***** mapStateToprops：将外部的数据（即state对象）转换为UI组件的标签属性 state.he赋值
    							//给count  这样UI组件可以 this.props.value 得到
	state => ({                 	//这里是reducer里的 const initState = 0 初始化状态  he在store中赋值
		count:state.he,            	//he:countReducer  //countReducer 赋值给he UI组件将这样用 this.props.count
		renshu:state.rens.length    //rens是个数组 里面是一个个对象
	}),
	{                             //*****dispatch(action): 分发action, 触发reducer调用, 产生新的state
		jia:createIncrementAction,  //*****	 mapDispatchToProps：将分发action的函数转换为UI组件的标签属性
		jian:createDecrementAction,
		jiaAsync:createIncrementAsyncAction,
	}
)(Count)
/*上面的原型是这样的：
*  原型：export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
*
  	mapStateToprops原型：
	function mapStateToProps(state){
		return {count:state}
	}   简写成state => ({count:state}),  箭头函数返回一个对象 去掉{} 并加小括号
*
*  //mapDispatchToProps原型：
	/*
		原写法： jia: ()=>{}  将()=>{} 赋值给jia
		jia:(number)=> {dispatch(createIncrementAction(number))}
		简写：()里只有一个参数，可以省略() {}里只有一条语句可以省略{}
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
	mapDispatchToProps的再简写  参数和方法体都省了，dispatch都省了，只告诉调用哪个action  底层自动dispatch
		jia:createIncrementAction,
		jian:createDecrementAction,
		jiaAsync:createIncrementAsyncAction,
 注意： state => ({count:state})   ({ }) 里不能有多余空行
 */